<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <!-- 参见https://www.layui.com/demo/table/operate.html -->
    <body>
        <div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">用户管理</a>
            <a>
              <cite>用户管理</cite></a>
          </span>
          <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5">
                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text" id="username" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text" id="phone" name="phone"  placeholder="请输入电话号" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <!-- 必须加type="button"，否则在谷歌浏览器会执行submit操作  -->
                                    <button class="layui-btn" id="search" type="button"><i class="layui-icon">&#xe615;</i></button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-body ">
                        <table class="layui-hide" id="main_table" lay-filter="main_table"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </body>

    <script type="text/html" id="operation_bar">
        <a class="layui-btn layui-btn-xs" lay-event="reset_pwd">重置密码</a>
    </script>

    <script>

      layui.use('table', function(){
          var table = layui.table;

          table.render({
              elem: '#main_table'
              ,url:'user/list'
              ,cols: [[
                  {type:'checkbox'}
                  ,{field:'id', width:80, title: 'ID',hide:true}
                  ,{field:'phone', width:180, title: '电话'}
                  ,{field:'name', width:180, title: '姓名'}
                  ,{field:'role', width:150, title: '角色'}
                  ,{field:'status',width:150, title: '状态'}
                  ,{field:'create_time', width:180, title: '注册日期', sort: true}
                  ,{fixed:'right',align:'center', title: '操作', toolbar: '#operation_bar'}
              ]]
              ,page: true
              ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                  return {
                      "code": res.code, //解析接口状态
                      "msg": res.msg, //解析提示文本
                      "count": res.total, //解析数据长度
                      "data": res.data //解析数据列表
                  };
              }
              ,id:'main_table'
          });


          //监听工具条
          table.on('tool(main_table)', function(obj){
              var data = obj.data;
              var layEvent = obj.event;

              if(layEvent === 'reset_pwd'){
                  layer.confirm('您确定要重置密码吗？', function(index){
                      // alert(data.id)
                      reset_pwd(data.id);
                      // layer.close(index);
                      //向服务端发送删除指令
                  });
              }
          });


          $('#search').on('click', function(){
              var username = $('#username');
              var phone = $('#phone');

              //执行重载
              table.reload('main_table', {
                  page: {
                      curr: 1 //重新从第 1 页开始
                  }
                  ,where: {
                      name: username.val(),
                      phone: phone.val()
                  }
              }, 'data');

          });

      });
    function reset_pwd(id){
        $.ajax({
            url:'user/resetPwd',
            type:'post',
            dataType:'json',//服务器端返回的数据格式是json
            data: {
                "id":id
            },//发给服务器端的数据
            success:function(res){   //data:服务器端返回给浏览器端的数据
                layer.closeAll('loading');
                if(res.code==0){
                    layer.msg('重置成功！');

                }else{
                    alert(res.msg);
                }
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest);
                alert(textStatus);
                alert(errorThrown);
            }

        });
    }
    </script>
</html>